import {
  Component,
  ChangeDetectionStrategy,
  ViewEncapsulation,
  Optional,
  Input,
} from '@angular/core'

@Component({
  selector: 'ad-tree-node-switcher',
  template: ` <svg
      *ngIf="loading"
      viewBox="0 0 1024 1024"
      focusable="false"
      fill="#0e88e5"
      width="16px"
      height="16px"
      data-icon="loading"
      aria-hidden="true"
      class="anticon-spin"
    >
      <path
        d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
      ></path>
    </svg>
    <svg
      *ngIf="!loading"
      viewBox="0 0 1024 1024"
      focusable="false"
      fill="currentColor"
      width="16px"
      height="16px"
      [style.transform]="expanded ? 'rotate(0deg)' : 'rotate(-90deg)'"
      [style.transition]="'transform 200ms'"
    >
      <path
        d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
      ></path>
    </svg>`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  host: {
    '[class.ad-tree-node-switcher]': 'true',
  },
})
export class AdTreeNodeSwitcher {
  @Input() expanded: boolean = false
  @Input() loading: boolean = false
}
